<template>
	<div class="flex - container- vertical">
		<!-- 轮播图： -->
		<div class="block text-center">
			<el-carousel height="700px">
				<el-carousel-item v-for="image in bannerList" :key="item">
					<img :src="`/src/assets/images/${image}`">
				</el-carousel-item>
			</el-carousel>
		</div>
		
		<!-- 循环盒子 -->
	<div class="container" >
		<div class="layout-header-container">
			<div class="layout-header-left" >
				<img class="layout-header-left-img" src="../../assets/honglian.webp" alt="">
				<router-link to="/home/jieshao">京剧之窗</router-link>
			</div>
				<!-- <div class="layout-header-right">
					<button type="button" class="btn btn-light" @click="onLogout">更多</button>
				</div> -->
		</div>
		
	</div>	
<h2 class="text_bt" >京剧艺术特点</h2>
<div class="container_name">
	<div class="box" v-for="index in td" :key="index.id">
		<img :src="index.img"/>
		<p>{{index.name}}</p>
		<p>{{index.text}}</p>
	</div>
</div>
<div class="container" >
		<div class="layout-header-container">
			<div class="layout-header-left" >
				<img class="layout-header-left-img" src="../../assets/honglian.webp" alt="">
				<router-link to="/home/zhongxin">京剧艺术欣赏</router-link>
			</div>
				<!-- <div class="layout-header-right">
					<button type="button" class="btn btn-light" @click="onLogout">更多</button>
				</div> -->
		</div>
	</div>	
	<!-- 图片循环 -->
	<div class="baoguo">
		<div class="box" v-for="(v,i) in de" :key="i">
			  <img :src="`/src/assets/images/${v.img_url}`"  style="width:450px;height: 300px;margin:0 50px;"/>
			  <p style="margin:0 200px" class="text_name">{{v.name}}</p>
		  </div>
	</div>
	<div class="container" >
			<div class="layout-header-container">
				<div class="layout-header-left" >
					<img class="layout-header-left-img" src="../../assets/honglian.webp" alt="">
					<router-link to="/home/yishu">关于我们</router-link>
				</div>
					<!-- <div class="layout-header-right">
						<button type="button" class="btn btn-light" @click="onLogout">更多</button>
					</div> -->
			</div>
		</div>	
	

<!-- 轮播图盒子 -->
	</div> 
</template>

<script setup>
	import {ref} from 'vue'
	const bannerList = ref(['2.png', '3.jpg', '4.jpg'])
	const list = ref ([
		{
			img: "../../assets/honglian.webp",
		}
	])
	const de =ref([
		{img_url:'lun1.jpg',name:'《空城计》'},
		{img_url:'lun2.jpg',name:'《锁麟囊》'},
		{img_url:'lun3.jpg',name:'《伍子胥》'},
		{img_url:'lun4.jpg',name:'《八大锤》'},
	// {img_url:'lun5.jpg',name:'戏剧5'},
	])
	
	const td = ref ([
		{
			id: 1,
			name: "综合性",
			text: "将唱、念、做、打四种表演手段有机融合在一起",
			img: '/public/t1.png',
		},
		{
			id: 2,
			name: "程式化",
			text: "京剧的表演过程和形式都有严格的规范和程式",
			img: '/public/t2.png',
		},
		{
			id: 3,
			name: "流派纷呈",
			text: "京剧在长期的发展过程中，形成了众多的流派",
			img: '/public/t3.png',
		},
	])
</script>

<style lang="less" scoped>
	.text_bt{ text-align: center;}
	.container_name {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  margin-left: 300px;
	}
	
	.box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-right: 20px;
	}
	.text_name{
		font-size: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
.baoguo{
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
	margin-left: 300px;
	padding-top: 20px;
	// width: 1000px;
}
.baoguo box{
	margin:40px;
}

a{
	text-decoration: none;
	color:black;
	font-weight: 800;
}
	.demonstration {
		color: var(--el-text-color-secondary);
	}

	.el-carousel-item {
		width: 100%;
	}

	.el-carousel__item img {
		object-fit: cover;
		width: 100%;
		height: 100%
	}

	//剧院详情样式
	.layout-header-container {
		height: 60px;
		border-bottom: 1px solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.5rem;
		background-color: #660000;

		.layout-header-left {
			display: flex;
			align-items: center;
			color: #fff;
		}
	}

	.layout-header-left-img {
		height: 50px;
	}

	.layout-header-right {
		.btn {
			background-color: #5f9ea0;
			color: #fff;
		}

		.btn:hover {
			color: #999;
			opacity: 0.5;
			background-color: #fff;
		}
	}

	.layout-left {
		float: left;

	}

	.layout-left-img {
		width: 400px;
		/* 根据实际情况调整图片宽度 */
		height: auto;
	}

	.layout-right {
		overflow: hidden;
		/* 清除浮动影响 */
	}

	.menu {
		list-style: none;
		padding: 10;
	}

	.menu-item {
		margin-bottom: 10px;
	}

	

	

	// 去除盒子边距
	.flex - container {
		display: flex;
	}

	.flex {
		background: url(/public/beijing.webp) no-repeat center center fixed;
		background-size: cover;
		/* 使用 filter 设置透明度 */

	}
</style>